<template>
	<view class="withdraws">
		<view class="withdraws-tyis" @click="bankCards">
			<text>到账账户</text>
			<view class="withdraws-tyis-info" >
				<text>{{userIfon.bank_account}}</text>
				<image src="@/static/images/myIfon/lujin.png" mode="aspectFit" class="icor"></image>
			</view>
		</view>
		 <view class="withdraws-border"> </view>
		 <view class="withdraws-money">
		 	<view class="withdraws-money-title">
		 		<text>提现金额</text>
		 	</view>
			<view class="withdraws-money-tixian">
				<text>￥</text>
				<u--input
					border="none"
					placeholder="请输入提现金额"
					type="number"
					maxlength="13"
					v-model="money"
					></u--input>
					<text @click="toAll">全部提现</text>
			</view>
			 <view class="withdraws-border"> </view>
			 <view class="withdraws-money-cantixian">
			 	<text>可提现金额{{userIfon.money?(userIfon.money*1).toFixed(2):'0.00'}}</text>
			 </view>
			 <view class="withdraws-money-info">
			 	<view class="withdraws-money-info-premium">
			 		<text>手续费</text>
					<text>{{fee}}%</text>
			 	</view>
				<view class="withdraws-money-info-actual">
					<text>实际到账</text>
					<text>¥{{money?(money*(100-fee)/100).toFixed(2):0.00}}</text>
				</view>
			 </view>
			 <view class="withdraws-money-btn" @click="moneyFunc">
			 	  <text>确认提现</text>
			 </view>
			 <view class="withdraws-money-tips">
			 	<text>注意事项</text>
				<view class="withdraws-money-tips-item1">
					<view class="withdraws-money-tips-item1-boder"></view>
					<text>申请提现最低金额¥{{min}}起</text>
				</view>
				<view class="withdraws-money-tips-item2">
					<view class="withdraws-money-tips-item2-boder"></view>
					<text>提现动作完成后，1-2个工作日内到账（假节日除外且延后）
					实际到账银行卡为用户（必须是实名用户）名下任意储蓄卡，
					实名用户名下的储蓄卡必须是正常且不被冻结、限制的储蓄卡
                    </text>
				</view>
			 </view>
		 </view>
		 <CodePopup
		 title="资金安全提示"
		 btnText="确定提现"
		 :loading="loading"
		 @show="e=>codeShow=e" 
		 :show="codeShow" 
		 :username="userIfon.mobile" 
		 v-model="verify_code" 
		 @submit="setWithdraw"
		 ></CodePopup>
	</view>
</template>

<script>
	import CodePopup from '@/components/codePopup.vue'
	import { mapState, mapMutations } from 'vuex'
	import {mixin} from '@/Mixins/mixin.js'
	
	export default{
		mixins:[mixin],
		components:{CodePopup},
		data(){
			return{
				money:'',
				userIfon:'',
				fee:'',
				min:'',
				type:2,
				myAnout:'',
				loading:false,
				codeShow:false,
				verify_code:''
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {
			// let userIfon=uni.getStorageSync('userInfo')
			// this.userIfon=userIfon
			this.initUser()
		},
		methods:{
		async initUser(){
				let datas=await this.getConfigDetail('transfer_rate')
				this.fee=datas.data.value
				// console.log(this.fee*1)
				let mine=await this.getConfigDetail('transfer_min')
				this.min=mine.data.value
				let data = await this.$http({
					url:this.$api.getUser,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{}
				})
				if(data.code==200){
					this.myAnout=(data.data.money == ''?'0.00':data.data.money)
					this.userIfon=data.data
					this.userIfon.real_name_status=1
					// this.myGoodsList()
				}
			},
			bankCards(){
				if(this.userIfon.bank_account) return
				if(this.userIfon.real_name_status==0){
				uni.navigateTo({
						url:'/subpage/Verified/index'
				})}else {
				uni.navigateTo({
					url:'/pages/wallet/addBank'
				})
				}
			},
			moneyFunc(){
				// console.log(this.myAnout,this.money)
				if(this.myAnout*1<this.money*1){
					this.$u.toast('可提现额度不足')
					return
				}
				if(this.money<this.min){
					this.$u.toast('最低提现金额'+this.min)
					return
				}
				if(!this.userIfon.bank_account){
					this.$u.toast('请您先添加银行卡！')
					setTimeout(()=>{
                        uni.navigateTo({
                        	url:'/pages/wallet/addBank'
                        })						
					},1500)
					return
				}
				this.codeShow=true
			},
			toAll(){
				this.money=(this.myAnout*1).toFixed(2)
			},
			async setWithdraw(){
				this.loading = true
				let data = await this.$http({
					url:this.$api.transfer,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{
						'username':this.userIfon.username,
						'cash_money':this.money,
						'type':1,
						'verify_code':this.verify_code
					}
				})
				if(data.code==200){
					this.$u.toast('提现成功')
					this.getUser()
					this.codeShow=false
					this.money=''
					this.verify_code=''
				}else{
					// this.codeShow=false
					this.$u.toast(data.msg)
				}
				setTimeout(() => {
					this.loading = false
				}, 2000)
			},
		}
	}
</script>

<style scoped lang="scss">
	.withdraws{
		padding-top: 60rpx;
		&-tyis{
			width: calc(100vw - 80rpx);
			margin: auto;
			display: flex;
			justify-content: space-between;
			
			text:nth-child(1){
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8C93AA;
			}
			text:nth-child(2){
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #16172F;
			}
			image{
				width: 12rpx;
				height: 20rpx;
				margin:0 10rpx;
			}
			&-info{
				display: flex;
				align-items: center;
				text{
					font-size: 28rpx !important;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #16172F !important;
				}
			}
		}
		&-money{
			&-title{
				margin: 40rpx 0 0 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8C93AA;
			}
			&-tixian{
				margin: auto;
				width: calc(100vw - 80rpx);
				display: flex;
				align-items: center;
				margin-top: 28rpx;
				margin-bottom: -20rpx;
				text:nth-child(1){
					font-size: 44rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #16172F;
				}
				text:nth-child(3){
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #16172F;
				}
			}
			&-cantixian{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8C93AA;
				margin: 20rpx 0 0 40rpx;
			}
			&-info{
				width: calc(100vw - 80rpx);
				height: 174rpx;
				background: #F7F8FA;
				border-radius: 4rpx;
				margin: auto;
				margin-top: 30rpx;
				&-premium{
					margin: auto;
					width: calc(100% - 40rpx);
					display: flex;
					justify-content: space-between;
				   
					text:nth-child(1){
						 margin-top: 32rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
					text:nth-child(2){
						 margin-top: 32rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #16172F;
					}
				}
				&-actual{
					margin: auto;
					margin-top: 30rpx;
					width: calc(100% - 40rpx);
					display: flex;
					justify-content: space-between;
				   text:nth-child(1){
				   	font-size: 28rpx;
				   	font-family: PingFangSC-Regular, PingFang SC;
				   	font-weight: 400;
				   	color: #8C93AA;
				   }
				   text:nth-child(2){
				   	font-size: 28rpx;
				   	font-family: PingFangSC-Regular, PingFang SC;
				   	font-weight: 400;
				   	color: #16172F;
				   }
				}
			
			}
			&-btn{
				width: calc(100vw - 80rpx);
				height: 88rpx;
				background: #468EFF;
				border-radius: 4rpx;
				margin: auto;
				margin-top: 50rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
			&-tips{
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #16172F;
				margin-left: 40rpx;
				margin-top: 48rpx;
				&-item1{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					&-boder{
						width: 8rpx;
						height: 8rpx;
						background: #468EFF;
						border-radius: 50%;
					}
					text{
						margin-left: 8rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
				}
				&-item2{
					display: flex;
					margin-top: 16rpx;
					// align-items: center;
					&-boder{
					
						width: 8rpx;
						height: 8rpx;
						background: #468EFF;
						border-radius: 50%;
						margin-top: 12rpx;
						// position: absolute;
					}
					text{
						margin-left: 8rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
				}
			}
		}
	}
	.withdraws-border{
	   width: calc(100vw - 80rpx);
	   height: 1px;
	   margin: auto;
	   background: #ECEFF1;
	   margin-top: 40rpx;
	 
	}
</style>